Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.
This article will look at how to get started with UI development with Chakra UI Vue.
Tabs
We can add tabs with Chakra UI Vue.
To add them, we write:
<template>
<c-box>
<c-tabs>
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
We add the c-tabs component to add the tab and tab panel container.
c-tab-list is the container for the tabs.
c-tab wraps the content of each tab.
c-tab-panels has the tab panels.
c-tab-panel has the tab panel.
We can change the style of the tabs with the variant prop:
<template>
<c-box>
<c-tabs variant="enclosed">
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
The possible values for variant is:
lineenclosedenclosed-coloredsoft-roundedsolid-roundedunstyled
We can set the variant-color prop with:
<template>
<c-box>
<c-tabs variant="soft-rounded" variant-color="green">
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
to set the background color of the tabs when selected.
We can set the tab size with the size prop:
<template>
<c-box>
<c-tabs variant="soft-rounded" size="sm" variant-color="green">
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
size can be sm , md or lg , ordered from smallest to largest.
We can change the alignment of the tabs with the align prop:
<template>
<c-box>
<c-tabs align="end">
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
And we can make the tabs stretch to the width of the panel with the is-fitted prop:
<template>
<c-box>
<c-tabs is-fitted>
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
And we can set the default selected tab with the default-index prop:
<template>
<c-box>
<c-tabs :default-index="2">
<c-tab-list>
<c-tab>One</c-tab>
<c-tab>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
And we can disable a tab with the is-disabled prop:
<template>
<c-box>
<c-tabs>
<c-tab-list>
<c-tab>One</c-tab>
<c-tab is-disabled>>Two</c-tab>
<c-tab>Three</c-tab>
</c-tab-list>
<c-tab-panels>
<c-tab-panel>
<p>one</p>
</c-tab-panel>
<c-tab-panel>
<p>two</p>
</c-tab-panel>
<c-tab-panel>
<p>three</p>
</c-tab-panel>
</c-tab-panels>
</c-tabs>
</c-box>
</template>
<script>
import {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CTab,
CTabs,
CTabList,
CTabPanel,
CTabPanels,
},
};
</script>
Conclusion
We can add tabs easily with Chakra UI Vue.
